<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MRQ Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="static/images/favicon.ico" type="image/x-icon" />

    <script>
      window.MRQ_CONFIG = {{ MRQ_CONFIG|safe }};
    </script>
  </head>
  <body>

    <div class="navbar navbar-default navbar-top">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">MRQ Dashboard</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li class="js-nav-status">
              <a href="#status">Statuses</a>
            </li>
            <li class="js-nav-queues">
              <a href="#queues">Queues</a>
            </li>
            <li class="js-nav-workers">
              <a href="#workers">Workers</a>
            </li>
            <li class="js-nav-workergroups">
              <a href="#workergroups">Worker groups</a>
            </li>
              <li class="js-nav-agents">
              <a href="#agents">Agents</a>
            </li>
            <li class="js-nav-taskpaths">
              <a href="#taskpaths">Paths</a>
            </li>
            <li class="js-nav-taskexceptions">
              <a href="#taskexceptions">Exceptions</a>
            </li>
            <li class="js-nav-jobs">
              <a href="#jobs">Jobs</a>
            </li>
            <li class="js-nav-scheduledjobs">
              <a href="#scheduledjobs">Scheduled Jobs</a>
            </li>
            <li class="js-nav-scheduledjobs">
              <a href="#io">I/O</a>
            </li>

            <!--
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
              <ul class="dropdown-menu" aria-labelledby="download">
                <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li>
                <li><a href="./bootstrap.css">bootstrap.css</a></li>
                <li class="divider"></li>
                <li><a href="./variables.less">variables.less</a></li>
                <li><a href="./bootswatch.less">bootswatch.less</a></li>
              </ul>
            </li>
            -->
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a>Autorefresh <select class="js-autorefresh">
              <option value="1">1s</option>
              <option value="3">3s</option>
              <option value="5">5s</option>
              <option value="10">10s</option>
              <option value="20">20s</option>
              <option value="60">1m</option>
              <option value="300">5m</option>
              <option value="600">10m</option>
              <option selected="selected" value="-1">Disabled</option>
            </select></a>
            </li>

            <li><a href="https://github.com/pricingassistant/mrq" target="_blank">Github</a></li>
          </ul>

        </div>
      </div>
    </div>


    <div class="container">

      <div id="app-container">

        <div class="ox-loader">
            Loading...
        </div>

      </div>


      <script id="tpl-page-root" type="text/template">


        <div class="js-page-queues"></div>
        <div class="js-page-workers"></div>
        <div class="js-page-worker"></div>
        <div class="js-page-jobs"></div>
        <div class="js-page-scheduledjobs"></div>
        <div class="js-page-status"></div>
        <div class="js-page-index"></div>
        <div class="js-page-taskpaths"></div>
        <div class="js-page-taskexceptions"></div>
        <div class="js-page-io"></div>
        <div class="js-page-workergroups"></div>
        <div class="js-page-agents"></div>


      </script>


      <script id="tpl-page-queues" type="text/template">

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>


      <script id="tpl-modal-workers-io" type="text/template">

        <div class="container">

          <div class="row-fluid">
            <div class="col-xs-6">
              <table class="table-striped table table-bordered" style="width:100%">
                <tr><th>Task</th><th class="time">I/O time</th></tr>
                <% _.each(worker.io.tasks, function(row) { %>
                  <tr>
                    <td>
                      <%= row[0] %>
                    </td>
                    <td class="time">
                      <%= Math.round(row[1]*100)/100 %>s
                    </td>
                  </tr>
                <% }) %>
              </table>
            </div>

            <div class="col-xs-6">
              <table class="table-striped table table-bordered">
                <tr><th>I/O type</th><th class="time">I/O time</th></tr>
                <% _.each(worker.io.types, function(row) { %>
                  <tr>
                    <td>
                      <%= row[0] %>
                    </td>
                    <td class="time">
                      <%= Math.round(row[1]*100)/100 %>s
                    </td>
                  </tr>
                <% }) %>
              </table>
            </div>
          </div>
        </div>

      </script>

      <script id="tpl-page-workers" type="text/template">

        <div class="modal js-workers-modal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
                <div class="js-workers-modal-content"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="container" style="margin-bottom:5px;">

          <form class="form-inline js-datatable-filters pull-left" role="form">
            <br/>
            Filter by: &nbsp;
            <div class="form-group">
              <label class="sr-only" for="jobs-form-id">ID</label>
              <input type="text" class="form-control input-sm js-workers-datatable-filters-id" id="jobs-form-id" placeholder="Worker ID" value="<%- filters.id %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-queue">IP</label>
              <input type="text" class="form-control input-sm js-workers-datatable-filters-ip" id="jobs-form-ip" placeholder="Worker IP" value="<%- filters.ip %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-queue">IP</label>
              <input type="text" class="form-control input-sm js-workers-datatable-filters-queue" id="jobs-form-queue" placeholder="Queue" value="<%- filters.queue %>">
            </div>
            <div class="form-group">
              <select class="form-control input-sm js-workers-datatable-filters-status" id="jobs-form-status">
                <option <%= filters.status==""?"selected='selected'":"" %> value="">-statuses-</option>
                <% _.each({
                    "spawn": "spawn",
                    "started": "started",
                    "wait": "wait",
                    "full": "full",
                    "join": "join",
                    "stop": "stop",
                    "killing": "killing",
                    "kill": "kill",
                    "spawn-started-wait-full-join": "{RUNNING}",
                    "stop-killing-kill": "{NOT_RUNNING}"
                  }, function(k, i) { %>
                  <option <%= filters.status==i?"selected='selected'":"" %> value="<%= i %>"><%= k %></option>
                <% }) %>
              </select>
            </div>
            <!--
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div
            -->
            <button type="submit" class="btn btn-default js-datatable-filters-submit input-sm" style="padding:5px">OK</button>

          </form>

        </div>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-scheduledjobs" type="text/template">

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-taskpaths" type="text/template">

        <h3>Jobs by task path</h3>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-taskexceptions" type="text/template">

        <h3>Tasks by exceptions</h3>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-io" type="text/template">

        <h3>Current I/O operations</h3>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-workergroups" type="text/template">

        <h3>Worker groups</h3>
        <div class="container">
          <div class="row">
            <textarea style="width:100%;height:400px;font-family:monospace;" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}"></textarea>
            <button class="submit">Save</button>
          </div>
        </div>
      </script>

      <script id="tpl-page-agents" type="text/template">

        <div class="container" style="margin-bottom:5px;">

          <form class="form-inline js-datatable-filters pull-left" role="form">
            <br/>
            Filter by: &nbsp;

            <div class="form-group">
              <div class="checkbox">
                <label>
                  <input type="checkbox" class="js-datatable-filters-showstopped" <%= filters.showstopped?'checked="checked"':'' %>> Show stopped
                </label>
              </div>
            </div>

          </form>
        </div>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-index" type="text/template">

        <h3>Overall</h3>
        <div class="container">
          <div class="row">
            <div class="row-fluid js-circle-row">
            </div>
          </div>
        </div>
      </script>

      <script id="tpl-page-status" type="text/template">

        <h3>Jobs by status</h3>

        <div class="container">
          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>

      <script id="tpl-page-jobs" type="text/template">

        <div class="modal js-jobs-modal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
                <div class="alert alert-danger js-jobs-modal-callstack-outdated" role="alert" style="display:none">Current call stack unavailable. This is an outdated version.</div>
                <pre class="js-oxpre js-jobs-modal-content"></pre>
              </div>
            </div>
          </div>
        </div>

        <div class="container" style="margin-bottom:5px;">

          <form class="form-inline js-datatable-filters pull-left" role="form">
            <br/>
            Filter by: &nbsp;
            <div class="form-group">
              <label class="sr-only" for="jobs-form-id">ID</label>
              <input type="text" class="form-control input-sm js-datatable-filters-id" id="jobs-form-id" placeholder="Job ID" value="<%- filters.id %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-queue">Queue</label>
              <input type="text" class="form-control input-sm js-datatable-filters-queue" id="jobs-form-queue" placeholder="Queue" value="<%- filters.queue %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-worker">Worker</label>
              <input type="text" class="form-control input-sm js-datatable-filters-worker" id="jobs-form-worker" placeholder="Worker" value="<%- filters.worker %>">
            </div>
            <div class="form-group">
              <label class="sr-only" for="jobs-form-path">Task</label>
              <input type="text" class="form-control input-sm js-datatable-filters-path" id="jobs-form-path" placeholder="Task" value="<%- filters.path %>">
            </div>

            <div class="form-group">
              <label class="sr-only" for="jobs-form-exceptiontype">Exception Type</label>
              <input type="text" class="form-control input-sm js-datatable-filters-exceptiontype" id="jobs-form-exceptiontype" placeholder="Exception Type" value="<%- filters.exceptiontype %>">
            </div>

            <div class="form-group">
              <label class="sr-only" for="jobs-form-params">Task</label>
              <input type="text" class="form-control input-sm js-datatable-filters-params" id="jobs-form-params" placeholder="Params" value="<%- filters.params %>">
            </div>
            <div class="form-group">
              <select class="form-control input-sm js-datatable-filters-status" id="jobs-form-status">
                <option <%= filters.status==""?"selected='selected'":"" %> value="">-statuses-</option>
                <% _.each({
                    "queued": "queued",
                    "started": "started",
                    "success": "success",
                    "failed": "failed",
                    "retry": "retry",
                    "maxretries": "maxretries",
                    "maxconcurrency": "maxconcurrency",
                    "timeout": "timeout",
                    "interrupt": "interrupt",
                    "cancel": "cancel",
                    "abort": "abort",
                    "queued-started-success": "{OK}",
                    "failed-retry-maxretries-maxconcurrency-timeout-interrupt-cancel-abort": "{NOT OK}",
                    "failed-maxretries-maxconcurrency-timeout": "{ERROR}",
                    "failed-retry-maxretries-maxconcurrency-interrupt-timeout": "{ERROR+RETRY}",

                  }, function(k, i) { %>
                  <option <%= filters.status==i?"selected='selected'":"" %> value="<%= i %>"><%= k %></option>
                <% }) %>
              </select>
            </div>
            <!--
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div
            -->
            <button type="submit" class="btn btn-default js-datatable-filters-submit input-sm" style="padding:5px">OK</button>

          </form>

          <div class="pull-right js-jobs-groupactions">
            <br/>
            <button type="submit" class="btn btn-warning input-sm js-jobs-groupaction" data-action="requeue" style="padding:5px"><span class='glyphicon glyphicon-refresh'></span> Requeue these jobs</button>
            &nbsp;
            <button type="submit" class="btn btn-danger input-sm js-jobs-groupaction" data-action="cancel" style="padding:5px"><span class='glyphicon glyphicon-remove-circle'></span> Cancel these jobs</button>
          </div>

        </div>

        <div class="container">


          <table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered js-datatable">
          </table>
        </div>
      </script>


      <footer>
        <div class="row">
          <div class="col-lg-12">

          </div>
        </div>

      </footer>


    </div>


    <script src="static/bin/bundle.js"></script>


  </body>
</html>
